<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			//捕捉到表单的提交事件。再处理
			//如果验证不通过，不允许提交
			function checkForm(f){
				//f是form
				//找到元素，开始验证
				//表单元素除了支持前面说的那些getxxx方法，还支持通过表单直接查找
				var n=f.nickname;
				//不可替代，var n=f["nickname"];
				//昵称长度是 1--16
				var namecheck=checkName(n);
				 
				var pcheck=checkPass(f.pass);
				
				return namecheck && pcheck;
			}
			function checkName(n){
				if(n.value.length<1||n.value.length>16){
					alert("昵称长度必须在1-16之间，您输入的是"+n.value.length);
					//n.focus();//获得焦点
					//n.select();
					return false;
				}
				return true;
			}
			function checkPass(p){
				var rp=document.getElementById("repass");
				if(p.value<6||p.value>30||p.value!=rp.value){
					alert("密码长度必须6-30之间，且两次输入必须相同");
					//p.focus();
					return false;
				}
				return true;
			}
		</script>
	</head>
	<body>
	<form action="index1.html" method="get" onsubmit="return checkForm(this);">
			<h1>表单验证</h1>
			<p>
				<label>昵称</label><input type="text" name="nickname" onblur="checkName(this)"/>
			</p>
			<p>
				输入密码:<input name="pass" type="password" id="pwd" class="inputs" onblur="checkPass(this)"/>
			</p>
			<p>
				
			再次输入密码:<input type="password" id="repass" name="repass"/>
			</p>
			<p>
				您的Email:<input type="email" class="inputs" id="email"/><br />
			
			</p>
			<p>
				<label>手机号</label>
				<input type="tel" name="telephone" />
			</p>
			<p>
				<label>年龄</label>
				<input type="text" name="age"/>
			</p>
			
			<input type="submit" value="注册" name="btn" class="rbl"/>
		</form>
	</body>

</html>
